﻿<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Clock Demo</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
		
	<style>		
		@font-face {
			font-family: DigitsBoldItalic;
			src: url(/fonts/DS-DIGIT.TTF);		
		}
		
		.digits {
			font-family: DigitsBoldItalic;
			font-size: 62pt;
			text-align: right;
		}
	</style>		

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/main.css">
		
		<script src="js/vendor/modernizr-2.6.2.min.js"></script>
		<!-- 使用 jQuery + jQuery Mobile + Codiqa Lib... -->
		<link rel="stylesheet"  href="http://codiqa.com/static/js/offline/jquerymobile/1.2.0/jquery.mobile-1.2.0.css" />
		<link rel="stylesheet" class="ext"  href="http://codiqa.com/static/style/target.css?1354834570" />
		<link rel="stylesheet" class="ext"  href="http://codiqa.com/static/style/my.css?1354640146 />
		<link rel="stylesheet" href="http://codiqa.com/icons/css" media="screen" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://codiqa.com/static/js/offline/jquery-ui-mobilecustom.js"></script>
		<script type="text/javascript" src="http://codiqa.com/static/js/offline/jquerymobile/1.2.0/jquery.mobile-1.2.0.js"></script>
		
		</head>

		<script type="text/javascript">
			var socket;
			if (window["WebSocket"]) {
	    		var host = window.location.hostname;									// 取得主機名稱 (與瀏覽器輸入的網址相同)
	    		var port = window.location.port;										// 取得連線 port number
				socket = new WebSocket("ws://" + host + ":" + port + "/sslm-k-056b");	// 建立 WebSocket 物件, service name='sslm-k-056b'
				socket.onmessage = function(evt) {											// 接收訊息 callback function
					var msg = JSON.parse(evt.data);											// 將收到的資料轉換為 JSON 物件
					// nothing
				}
		
				function onEvent(cmd, val) {
					if ( socket.readyState==1 ) {
						var msg =  { command:cmd, value: parseInt(val)};	// make JSON object
						socket.send(JSON.stringify(msg));					// send message with JSON format string
					} else {
						// reconnect
						socket = new WebSocket("ws://" + host + ":" + port + "/sslm-k-056b");	
					}
				}
			}
		</script>

		<body>
			<!--[if lt IE 7]>
			<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
			<![endif]-->
	
			<!-- Home -->
			<div data-role="page" id="page1">
			    <div data-theme="a" data-role="header">
			        <h3>
			            SSLM-K-056B
			        </h3>
			    </div>
			    <div data-role="content">
			        <div id="id-datetime" data-role="fieldcontain" onclock>
			            <fieldset data-role="controlgroup" data-type="horizontal">
			                <legend>
			                    Date / Time
			                </legend>
			                <input id="radio1" name="showType" value="date" type="radio" onclick="onEvent(0, 0);">
			                <label for="radio1">
			                    Date
			                </label>
			                <input id="radio2" name="showType" value="time" type="radio" onclick="onEvent(0, 1);" checked="checked">
			                <label for="radio2">
			                    Time
			                </label>
			            </fieldset>
			        </div>
					<div data-role="fieldcontain">
		            	<fieldset data-role="controlgroup">
			                <label for="id-hour">
			                    Time Format (Hour)
			                </label>
			                <select name="toggleswitch1" id="id-hour" data-theme="" data-role="slider"
			                data-mini="true" onchange="onEvent(2, this.options[this.options.selectedIndex].value);" >
			                    <option value="0">
			                        24
			                    </option>
			                    <option value="1">
			                        12
			                    </option>
			                </select>
	            		</fieldset>
        			</div>			        
			        <div data-role="fieldcontain">
			            <fieldset data-role="controlgroup">
			                <label for="id-brightness">
			                    Brightness
			                </label>
			                <input id="id-brightness" type="range" name="slider" value="50" step="2" 
			                min="0" max="100" data-highlight="true" onchange="onEvent(1, this.value);">
			            </fieldset>
			        </div>
			    </div>
			</div>
		</body>
</html>
